<template>
    <view class="content">
        <view class="header">
            <u-icon name="error-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>未支付</view>
        </view>
        <view class="header">
            <u-icon name="more-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>服务中</view>
        </view>
        <view class="header">
            <u-icon name="checkmark-circle" color="#000" size="44" margin-bottom="0" margin-top="0"></u-icon>
            <view>已完成</view>
        </view>
        
        <view class="box">
            <view class="info">
                <image src="../../static/icon/icon_01.png" class="icon-01"></image>
                <view class="name">李同学</view>
                <view class="male">男</view>
                <view class="female">女</view>
                <view class="age">12岁</view>
            </view>
            <view class="add">
                <view class="add-t">服务目的地</view>
                <view class="add-d">北京市北京市海淀区东升镇东升镇中关创新中心东升科技园</view>
            </view>
        </view>
        <view class="box">
            <view class="item">
                <image src="../../static/del/21.png" class="img"></image>
                <view class="item-r">
                    <view class="cate">伙伴计时</view>
                    <view class="item-d">
                        <view class="u-flex-1">
                            <text class="cate-t">陪学习</text>
                            <text class="subject">数学</text>
                        </view>
                        <view class="num">剩余5次服务</view>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="u-p-r-15">服务选择</view>
                <view>周期服务</view>
            </view>
            <view class="item2">
                <view class="u-p-r-15">服务时间</view>
                <view class="times">
                    三周
                    <view v-for="(item, index) in 3" :key="index">星期一  19:30-20:00</view>
                </view>
            </view>
            <view class="item">
                <view class="u-p-r-15">价格</view>
                <view class="price">￥<text>69.00</text></view>
            </view>
            <view class="item">
                <view class="u-p-r-15 u-flex">
                    <view class="cou-icon">券</view>
                    <view>平台优惠券</view>
                </view>
                <view class="price">￥<text>10</text></view>
            </view>
            <view class="total">
                <view>
                    优惠<text class="money">￥10</text>
                </view>
                <view class="u-p-l-30">
                    合计 ￥<text class="money-t">69.00</text>
                </view>
            </view>
            <view class="line-kf">
                <image src="../../static/icon/tel_03.png" class="tel-03"></image>
                <view>在线客服</view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">
                <u-icon name="clock" color="#000" size="28"></u-icon>
                <view class="title-text">服务延期</view>
            </view>
            <view class="lay">
                <view>延期：5周</view>
                <view>价格：￥10</view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">
                <image src="../../static/icon/icon_02.png" class="icon-02"></image>
                <view class="title-text">备注</view>
            </view>
            <view class="notes">
                现代汉语中没有善长的说法，但常常有同学使用，应该使用“善于”。下面就“擅长”、“善于”用法作一个比
            </view>
        </view>
        
        <view class="box u-p-b-30">
            <view class="ser-tit">
                <view class="u-flex">
                    <image src="../../static/icon/icon_03.png" class="icon-03"></image>
                    <view class="title-text">服务人员</view>
                </view>
                <view class="btn-call">联系电话</view>
            </view>
            
            <view class="teacher">
                <view class="teacher-check">
                    <u-icon name="checkbox-mark" color="#000" size="28"></u-icon>
                </view>
                <image src="../../static/del/13.png" class="avatar"></image>
                <view class="u-flex-1">
                    <view class="teacher-r-t">
                        <view class="teacher-name">张先生</view>
                        <view class="real">已实名</view>
                        <u-icon name="star-fill" color="#fec427" size="28"></u-icon>
                        <view class="star-num">5</view>
                    </view>
                    <view class="great">擅长：擅长内容展示擅长内容展示擅长内容擅长内容展示擅长内容展示擅长内容</view>
                </view>
            </view>
            
            <view class="teacher-btn">
                <view>
                    <image src="../../static/icon/icon_04.png" class="icon-04"></image>
                    <view>在线沟通</view>
                </view>
                <view>
                    <image src="../../static/icon/add.png" class="add-icon"></image>
                    <view>地图定位</view>
                </view>
            </view>
            
            <view class="u-p-t-30">
                <view class="rate-top">
                    <u-rate :count="5" v-model="value" active-color="#fcc937" inactive-color="#f1f1f1" :disabled="true"></u-rate>
                    <view class="u-p-l-10">3星</view>
                    <view class="u-p-l-10">评分</view>
                </view>
                <view class="rate-down">
                    评价：<text>现代汉语中没有善长的说法，但常常有同学使用，应该使用“善于”。下面就“擅长”、“善于”用法作一</text>
                </view>
            </view>
        </view>
        
        <view class="box u-p-t-30">
            <view class="list">
                <view>订单编号</view>
                <view class="list-r">
                    <view class="order-no">220152255228269823</view>
                    <view class="copy" @click="copy(data.order_no)">复制</view>
                </view>
            </view>
            <view class="list">
                <view>下单时间</view>
                <view class="list-r">2023-12-17 11:02</view>
            </view>
            <view class="list">
                <view>付款时间</view>
                <view class="list-r">2023-12-17 11:02</view>
            </view>
            <view class="list">
                <view>开始服务时间</view>
                <view class="list-r">2023-12-17 11:02</view>
            </view>
            <view class="list">
                <view>完成服务时间</view>
                <view class="list-r">2023-12-17 11:02</view>
            </view>
        </view>
        
        <view class="box">
            <view class="ser-tit">
                <view class="u-flex">
                    <image src="../../static/icon/icon_16.png" class="icon-16"></image>
                    <view class="title-text">学习记录</view>
                </view>
                <view class="btn-more" @click="$gTo(`./study-record`)">查看更多</view>
            </view>
            <view class="study">
                <view>2023-12-17 11:02</view>
                <view class="study-note">特别说明：现代汉语中没有善长的说法，但常常有同学使用，应该使用“善于”。下面就“擅长”、“善于”用法作一个比较。都有在某方面有特长的意思。即在某一方面比较熟悉，能运用自如。擅长后接名词，善于后接动词。</view>
                <view class="img-box">
                    <image src="../../static/del/35.png" class="study-img" v-for="(item, index) in 3" :key="index"></image>
                </view>
            </view>
        </view>
        
        <view class="footer">
            <view class="btn2" @click.stop="$gTo(`./cancel-order?id=${id}`)">取消服务</view>
            <!-- <view class="btn1">立即预约 ￥552</view> -->
            <view class="btn3" @click="Cshow = true">立即评价</view>
        </view>
        
        <u-popup mode="bottom" v-model="Cshow" :closeable="true" border-radius="20">
            <view class="popup">
                <view class="popup-top">
                    <view class="pop-tit">服务人员评价</view>
                    <view class="u-p-b-20">“3星 评分”</view>
                    <u-rate :count="5" v-model="value" active-color="#fcc937" inactive-color="#f1f1f1" 
                        :disabled="false" size="40"></u-rate>
                </view>
                <view class="pop-tip">请选择原因，我们会督促服务人员</view>
                <view class="pop-text">
                    <view class="pop-item" v-for="(item, index) in 7" :key="index" :class="{popActive : index == 0}">服务超时</view>
                </view>
                <textarea placeholder="您的反馈会督促我们做得更好" :auto-height="true" class="t-inp"></textarea>
                <view class="pop-btn">立即评价</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value: 3,
                Cshow: false,
            };
        },
        onLoad() {
            
        },
        methods: {
            
        }
    };
</script>

<style lang="scss">
    .popup{
        padding: 40rpx;
    }
    .popup-top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 50rpx;
        font-size: 40rpx;
        font-weight: bold;
    }
    .pop-tit{
        font-size: 34rpx;
        padding-bottom: 40rpx;
    }
    .pop-tip{
        font-size: 26rpx;
        color: #ff502e;
        padding-bottom: 15rpx;
    }
    .pop-text{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .pop-item{
        padding: 12rpx 16rpx;
        margin-right: 18rpx;
        margin-bottom: 18rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #767676;
    }
    .popActive{
        background-color: #fef8e1;
        color: #ff7d00;
    }
    .t-inp{
        padding: 20rpx;
        background-color: #f5f5f5;
        border: 2rpx solid #e7e7e7;
        border-radius: 10rpx;
        font-size: 24rpx;
        margin-bottom: 40rpx;
        width: 100%;
        min-height: 220rpx;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        background-color: #f29700;
        border-radius: 20rpx;
        padding: 20rpx;
    }
    
    
    
    
    
    page{
        background-color: #f5f6f8;
    }
    .content{
        padding: 0 20rpx 200rpx;
    }
    .header{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .header>view{
        padding-left: 10rpx;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 1;
    }
    
    .box{
        padding: 0 25rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 30rpx;
    }
    .icon-01{
        width: 37rpx;
        height: 37rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 15rpx;
    }
    .male{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #edf6ff;
        font-size: 26rpx;
        color: #2d96fa;
        text-align: center;
        line-height: 34rpx;
    }
    .female{
        width: 34rpx;
        height: 34rpx;
        border-radius: 5rpx;
        background-color: #ffeeed;
        font-size: 26rpx;
        color: #ff5748;
        text-align: center;
        line-height: 34rpx;
    }
    .age{
        font-size: 26rpx;
        color: #727272;
        padding-left: 15rpx;
    }
    .add{
        padding-top: 20rpx;
        padding-bottom: 30rpx;
    }
    .add-t{
        font-size: 24rpx;
        color: #727272;
    }
    .add-d{
        font-size: 30rpx;
        font-weight: bold;
        padding-top: 6rpx;
    }
    
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
    }
    .item2{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 30rpx;
    }
    .img{
        width: 112rpx;
        height: 112rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .item-r{
        flex: 1;
    }
    .cate{
        font-size: 28rpx;
        padding-bottom: 10rpx;
    }
    .item-d{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cate-t{
        font-size: 32rpx;
        font-weight: bold;
    }
    .subject{
        font-size: 26rpx;
        padding-left: 10rpx;
    }
    .num{
        font-size: 26rpx;
        color: #ff4a26;
        padding-left: 10rpx;
    }
    .times{
        text-align: right;
    }
    .times>view{
        padding-top: 10rpx;
    }
    .price{
        font-size: 26rpx;
        color: #ff4a26;
    }
    .price>text{
        font-size: 38rpx;
    }
    .cou-icon{
        width: 32rpx;
        height: 32rpx;
        background-color: #ff4a26;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #fff;
        line-height: 32rpx;
        text-align: center;
        margin-right: 8rpx;
    }
    .total{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 30rpx 0;
        border-top: 2rpx solid #eee;
        margin-top: 30rpx;
    }
    .money{
        color: #ff4a26;
    }
    .money-t{
        font-size: 42rpx;
    }
    .line-kf{
        padding: 20rpx 0 30rpx;
        border-top: 2rpx solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #444;
    }
    .tel-03{
        width: 36rpx;
        height: 30rpx;
        margin-right: 10rpx;
    }
    
    .ser-tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0 15rpx;
    }
    .btn-call{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 25rpx;
        background-color: #a2a8b8;
        border-radius: 50rpx;
    }
    .btn-more{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
    }
    .icon-03{
        width: 29rpx;
        height: 33rpx;
    }
    .icon-16{
        width: 31rpx;
        height: 31rpx;
    }
    .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 30rpx 0 15rpx;
    }
    .title-text{
        font-size: 30rpx;
        font-weight: bold;
        padding-left: 12rpx;
    }
    .icon-02{
        width: 27rpx;
        height: 32rpx;
    }
    .lay{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .lay>view{
        width: calc(100vw / 2);
    }
    .notes{
        font-size: 24rpx;
        word-break: break-all;
        white-space: pre-line;
        padding-bottom: 30rpx;
    }
    
    
    .teacher{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 20rpx;
        border: 2rpx solid #ffd048;
        border-radius: 20rpx;
        position: relative;
    }
    .teacher-check{
        width: 44rpx;
        height: 33rpx;
        background-color: #ffd048;
        text-align: center;
        line-height: 33rpx;
        border-radius: 20rpx 0 20rpx 0;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .avatar{
        width: 95rpx;
        height: 95rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    .teacher-r-t{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .teacher-name{
        max-width: 335rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 32rpx;
        font-weight: bold;
    }
    .real{
        padding: 7rpx 8rpx;
        background-color: #000;
        border-radius: 6rpx;
        font-size: 20rpx;
        color: #feeca8;
        line-height: 1;
        margin: 0 10rpx;
    }
    .star-num{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 6rpx;
    }
    .great{
        font-size: 24rpx;
        color: #949494;
        padding-top: 10rpx;
        width: 500rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .teacher-btn{
        padding-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .teacher-btn>view{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15rpx 90rpx;
        border-radius: 50rpx;
        background-color: #f5f6f8;
        font-size: 26rpx;
    }
    .icon-04{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }
    .add-icon{
        width: 24rpx;
        height: 29rpx;
        margin-right: 10rpx;
    }
    .rate-top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .rate-down{
        padding-top: 20rpx;
        font-size: 26rpx;
    }
    .rate-down>text{
        color: #949494;
        word-break: break-all;
        white-space: pre-line;
    }
    
    
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;
        padding-bottom: 25rpx;
    }
    .list-r{
        flex: 1;
        padding-left: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .order-no{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .copy{
        width: 90rpx;
        height: 42rpx;
        font-size: 22rpx;
        border: 2rpx solid #d1d1d1;
        border-radius: 50rpx;
        text-align: center;
        line-height: 42rpx;
        margin-left: 15rpx;
    }
    
    .study{
        font-size: 24rpx;
        color: #808aa5;
        line-height: 1.5;
        padding-bottom: 30rpx;
    }
    .study-note{
        padding-top: 10rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .img-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .study-img{
        width: 194rpx;
        height: 194rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    
    
    .footer{
        width: 100vw;
        height: 105rpx;
        background-color: #fff;
        padding: 0 25rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .footer>view{
        font-size: 28rpx;
        padding: 15rpx 20rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
    }
    .btn1{
        padding: 15rpx 150rpx !important;
        color: #fff;
        background-color: #f29700;
    }
    .btn2{
        border: 2rpx solid #eeeeee;
    }
    .btn3{
        background-color: #fffcf8;
        border: 2rpx solid #f29700;
    }
    

</style>
